<template>
  <div class="goods">
    <div class="goodsNav" ref="goodsNav">
      <ul>
        <li @click="selectMenu(index)" class="goodName" v-for="(good , index) in goods"
            :class="{'active' : currentIndex == index}">
          <span class="text">{{good.name}}</span>
        </li>
      </ul>
    </div>
    <div class="goodsMain" ref="goodsMain">
      <ul>
        <li class="title goodsMainList" v-for="good in goods">
          <span class="text">{{good.name}}</span>
          <ul>
            <li class="foodName" v-for="food in good.foods" @click="chooseOne(food)">
              <img class="foodImg" :src="food.image" alt="">
              <p class="foodTitle">{{food.name}}</p>
              <p class="description">{{food.description}}</p>
              <p class="sellCount">月售{{food.sellCount}}份  好评率{{food.rating}}</p>
              <p class="price">¥{{food.price}}

                <del v-show="food.oldPrice">¥{{food.oldPrice}}</del>
              </p>
              <div class="cartControlWrap">
                <cart-control @addClick="cartAdd" :food="food"></cart-control>
              </div>
            </li>
          </ul>
        </li>
      </ul>

    </div>
    <shopcart class="shopCart" ref="shopcart" :selectFoods="selectFoods" :deliveryPrice="seller.deliveryPrice"
              :minPrice="seller.minPrice"></shopcart>
    <transition name="slidLeft">
      <food @backClick="clickBack" v-show="showFlag" :showfooddetial="showFoodDetial" ref="showFoodDetial"></food>
    </transition>
  </div>
</template>

<script>
  const RES_OK = 0;
  import BScroll from  'better-scroll';
  import food from  'components/food/food';
  import shopcart from  'components/shopcart/shopcart';
  import cartControl from  'common/cartcontrol/cartcontrol';
  export default{
    components: {
      shopcart,
      cartControl,
      food
    },
    props: {
      seller: {
        type: Object
      }
    },
    data (){
      return {
        goods: [],
        scrollY: 0,
        heightList: [],
        showFoodDetial: {},
        showFlag: false
      }
    },
    computed: {
      currentIndex(){
        for (let i = 0; i < this.heightList.length; i++) {
          if ((this.scrollY >= this.heightList[i] && this.scrollY < this.heightList[i + 1])) {
            return i;
          }
        }
      },
      selectFoods(){
        let foods = [];
        this.goods.forEach((good) => {
          good.foods.forEach((food) => {
            if (food.count) {
              foods.push(food);
            }
          });
        });
        return foods;
      }
    },
    mounted(){
      this.initGoods();
    },
    methods: {
      clickBack(){
        this.showFlag = false;
      },
      chooseOne(food){
        this.showFoodDetial = food;
        this.showFlag = true;
        this.$refs.showFoodDetial.scrollInit();
      },
      cartAdd(target){
        this.$refs.shopcart.drop(target);
      },
      selectMenu (index){
        let goodsMainList = this.$refs.goodsMain.querySelectorAll('.goodsMainList');
        let el = goodsMainList[index];
        this.mainScroll.scrollToElement(el, 300)
      },
      initGoods (){
        this.axios.get('/static/data.json', {
          params: {}
        })
          .then((res) => {
            if (res.code === RES_OK) {
            }
            this.goods = res.data.goods;
            setTimeout(() => {
              this.initBScroll();
              this.computeHeight();
            }, 20);

          })
          .catch((error) => {
            console.log(error);
          });
      },
      initBScroll (){
        this.navScroll = new BScroll(this.$refs.goodsNav, {
          click: true
        });
        this.mainScroll = new BScroll(this.$refs.goodsMain, {
          probeType: 3,
          click: true//可点击，为了让加减组件可点击
        });
        this.mainScroll.on("scroll", (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y));
        });
      },
      computeHeight(){
        let goodsMainList = this.$refs.goodsMain.querySelectorAll('.goodsMainList');
        let height = 0;
        this.heightList.push(height);
        for (let i = 0; i < goodsMainList.length; i++) {
          height += goodsMainList[i].clientHeight;
          this.heightList.push(height);
        }
      }
    }
  }
</script>
<style lang="scss">
  .goods {
    position: absolute;
    display: flex;
    top: 170px;
    left: 0;
    width: 100%;
    bottom: 48px;
    overflow: hidden;
    .goodsNav {
      flex: 0 0 80px;
      width: 80px;
      box-sizing: border-box;
      font-size: 12px;
      color: rgb(7, 17, 27);
      font-weight: 200;
      background: #f3f5f7;
      .goodName {
        display: table;
        height: 54px;
        line-height: 14px;
        padding: 0 12px;
        &.active {
          position: relative;
          z-index: 10;
          margin-top: -1px;
          background: #fff;
          .text {
            border-bottom: 0;
            font-weight: 700;
          }
        }
        .text {
          display: table-cell;
          width: 56px;
          text-align: center;
          vertical-align: middle;
          border-bottom: 1px solid rgba(7, 17, 27, .1);
        }
      }
    }
    .goodsMain {
      flex: 1;
      .title {
        position: relative;
        &:after {
          content: '';
          display: block;
          width: 2px;
          height: 26px;
          background: #d9dde1;
          position: absolute;
          left: 0;
          top: 0;
        }
        & > .text {
          display: block;
          line-height: 26px;
          padding-left: 14px;
          font-size: 12px;
          color: rgb(147, 153, 159);
          background: #f3f5f7;
        }
        .foodName {
          position: relative;
          height: 76px;
          padding: 18px 0 18px 70px;
          margin: 0 18px;
          border-bottom: 1px solid rgba(7, 17, 27, 0.1);
          &:last-child {
            border: 0;
          }
          .foodImg {
            position: absolute;
            left: 0;
            top: 18px;
            width: 60px;
            height: 60px;
          }
          .foodTitle {
            font-size: 14px;
            color: rgb(7, 17, 27);
            line-height: 14px;
            margin-top: 2px;
          }
          .description, .sellCount {
            font-size: 10px;
            line-height: 12px;
            color: rgb(147, 153, 159);
            margin: 8px 0;
          }
          .price {
            font-size: 14px;
            line-height: 24px;
            font-weight: 700;
            color: rgb(240, 20, 20);
            del {
              font-size: 10px;
              color: rgb(147, 153, 159);
            }
          }
          .cartControlWrap {
            position: absolute;
            width: 72px;
            height: 24px;
            right: 0;
            bottom: 18px;
          }
        }
      }
    }
    .slidLeft-enter-active, .slidLeft-leave-active {
      transition: all 0.5s;
    }
    .slidLeft-enter, .slidLeft-leave-to {
      transform: translate3d(100%, 0, 0);
    }
  }
</style>
